<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表组</title>
    <link rel="stylesheet" href="../../css/bootstrap.css">
    <script src="../../js/jquery-1.11.2.min.js"></script>
    <script src="../../js/bootstrap.min.js"></script>
    <style>
        body {
            padding: 10px;
           /* margin-bottom: -1;*/
        }
    </style>
</head>
<body>
<ul class="list-group">
    <li class="list-group-item"><a href="">HTMl</a></li>
    <li class="list-group-item"><a href="">HTMl <span class="badge" style="margin-left:2px; ">10</span></a></li>
    <li class="list-group-item"><a href=""><span class="badge" style="margin-left:2px; ">10</span>HTMl</a></li>
    <li class="list-group-item"><a href="">HTMl</a></li>
</ul>
<hr>
<div class="list-group">
    <a href="#" class="list-group-item">        <span class="badge">10</span>HTML    </a>
    <a href="#" class="list-group-item">       HTML <span class="badge">10</span>   </a>
    <a href="#" class="list-group-item">        <span class="badge">10</span>HTML   </a>
</div>
<hr>
<ul class="list-group">
    <li class="list-group-item">HTMl</li>
    <li class="list-group-item">HTMl<span class="badge" >20</span></li>
    <li class="list-group-item">HTMl</li>
    <li class="list-group-item">HTMl</li>
</ul>
<hr>
<!--自定义列表组相当于dl+dt+dd-->
<div class="list-group">
    <a href="#" class="list-group-item active">
        <h3 class="list-group-item-heading">头部</h3>
        <p class="list-group-item-text">
            Html教程、 Html教程、 Html教程、 Html教程、 Html教程、 Html教程、 Html教程、 Html教程、
        </p>
    </a>
    <a href="#" class="list-group-item disabled">
        <h3 class="list-group-item-heading">头部</h3>
        <p class="list-group-item-text">
            Html教程、 Html教程、 Html教程、 Html教程、 Html教程、 Html教程、 Html教程、 Html教程、
        </p>
    </a>
    <a href="#" class="list-group-item list-group-item-success">
        <h3 class="list-group-item-heading">头部</h3>
        <p class="list-group-item-text">
            Html教程、 Html教程、 Html教程、 Html教程、 Html教程、 Html教程、 Html教程、 Html教程、
        </p>
    </a>

</div>
</body>
</html>
